<template>
	<view class="regBg">
		<view class="regBox">
			<u-form ref="uForm" :rules="rules" :model="registerForm" :errorType="errorType">
				<u-form-item required label-width="150" label="账号" prop="username">
					<u-input type="text" placeholder="请填写账号" v-model="registerForm.username"></u-input>
				</u-form-item>
				<u-form-item required label-width="150" label="密码" prop="password1">
					<u-input type="password" placeholder="请填写密码" v-model="registerForm.password1"></u-input>
				</u-form-item>
				<u-form-item required label-width="150" label="确认密码" prop="password2">
					<u-input type="password" placeholder="请填写密码" v-model="registerForm.password2"></u-input>
				</u-form-item>
			</u-form>
			<view class="padding flex flex-direction">
				<button @click="onSubmit" class="cu-btn bg-blue shadow lg" type="primary">立即注册</button>
				<view style="height: 20upx;"></view>
				<button class="cu-btn bg-blue lg" type="primary" @click="goback">返回</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message', 'toast'],
				registerForm: {
					username: '',
					password1: '',
					password2: '',
					nickname: '',
					avatar: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hzqasl/7ff730f0-f4d1-11ea-b680-7980c8a877b8.png"
				},
				rules: {
					username: [{
							required: true,
							message: '账号为必填！',
							trigger: 'blur'
						},
						{
							trigger: 'blur',
							asyncValidator: (rule, value, callback) => {
								const pattern = /^[_a-zA-Z0-9-]{3,20}$/
								if (!pattern.test(value)) {
									callback(new Error('账号必须为3-20位组合,只能使用英文、数字、减号或下划线'))
									return
								}
								// 校验用户是否存在
								uniCloud.callFunction({
									name: 'user-center',
									data: {
										action: 'checkUserName',
										params: {
											username: value,
										}
									}
								}).then(response => {
									const {
										code
									} = response.result.data
									if (code === 200) {
										callback()
									} else {
										callback(new Error('用户名已存在'))
									}
								})
							},
						}
					],
					password1: [{
							required: true,
							message: '密码为必填！',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '不低于6个字符',
							trigger: 'blur'
						}
					],
					password2: [{
							required: true,
							message: '确认密码为必填！',
							trigger: 'blur'
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value !== this.registerForm.password1) {
									callback(new Error('两次密码不一致！'))
								} else {
									callback()
								}
							},
						}
					]
				}
			};
		},
		onLoad(option) {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules) //必需
		},
		methods: {
			onSubmit() {
				this.$refs.uForm.validate(valid => {
					//如果表单验证规则通过
					if (valid) {
						uniCloud.callFunction({
							name: 'user-center',
							data: {
								action: 'register',
								params: {
									username: this.registerForm.username,
									password: this.registerForm.password2,
									nickname: this.registerForm.username,
									avatar: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hzqasl/7ff730f0-f4d1-11ea-b680-7980c8a877b8.png"
								}
							}
						}).then(response => {
							//提示成功或失败的消息
							uni.showModal({
								showCancel: false,
								content: response.result.msg
							})
							//如果注册成功
							if (response.result.code === 0) {
								const params = {
									username: this.registerForm.username,
									password: this.registerForm.password2
								}
								//注册成功后，就直接登录了
								uniCloud.callFunction({
									name: 'user-center',
									data: {
										action: 'login',
										params: params
									}
								}).then(response => {
									//如果登录失败
									if (response.result.code !== 0) {
										uni.showToast({
											title: response.result.msg,
											icon: 'none'
										})
									}
									//如果登录成功
									else {
										//本地存token存用户信息存密码
										uni.setStorageSync('uniIdToken', response.result.token)
										// 存到vuex里和本地存储
										this.$store.commit('login', params)
										this.$store.commit('getInfo', response.result.userInfo)
										uni.reLaunch({
											url: '/pages/take/take',
										})
									}
								})
							}
						})
					}
					//如果表单验证规则没通过
					else {
						return false
					}
				})
			},
			goback() {
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped lang="scss">
	.yzmDisable {
		background-color: #eee;
		color: #999;
	}

	.regBox {
		position: absolute;
		top: 50%;
		left: 30upx;
		right: 30upx;
		margin-top: -390upx;
		padding: 30upx 70upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.regBg {
		background: linear-gradient(#29cee8, #619ad6);
		position: absolute;
		top: 0upx;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
	}
</style>
